<template>
	<view class="">
		<u-navbar title="今日特卖" title-color="#333333" back-icon-color="#333333" :border-bottom="false">
		</u-navbar>
		<view class="shopCart" @click="toShopCart">
			<u-badge absolute :offset="[5,0]" size="mini"
				:count="numAll" type="error">
			</u-badge>
			<image src="@/static/gwc.png" style="width: 88rpx;height: 88rpx;"></image>
		</view>
		<scroll-view :style="{'height':height+'px'}" :scroll-y="true" :scroll-into-view="viewid" scroll-with-animation>
			<view class="container">
				<u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton>
				<view class="u-skeleton" v-if="loading">
					<view class="u-skeleton-fillet mt30" style="height: 500rpx; width: 750rpx;"></view>
					<view class="mt30 mr30">
						<view class="u-skeleton-fillet "
							style="height: 70rpx; width:600rpx;margin: 0 auto;margin-top: 20rpx;"></view>
					</view>
					<view class="df aic" style="flex-wrap: wrap;">
						<view v-for="item in 10">
							<view class="m30 ">
								<view class="u-skeleton-fillet " style="height: 114rpx; width: 182rpx;"></view>
								<view class="mt20">
									<view class="u-skeleton-fillet " style="width: 182rpx;height: 30rpx;"></view>
									<view class="u-skeleton-fillet  mt20" style="width: 50rpx;height: 30rpx;"></view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view style="font-size: 0;">
					<view v-if="bannerList.length">
						<u-swiper @click='clickBanner' :list="bannerList" height="320"></u-swiper>
					</view>
				</view>
				<u-sticky :offset-top="offsetTop">
					<view class="df aic jcsa  bgcf" style="padding: 20rpx 20rpx 10rpx;">
						<view class="category-tag u-text-center pr" :class="{'current-tag':Itemindex==currentIndex}"
							@click="handleChange(Itemindex)" v-for="(item,Itemindex) in sessionList">
							<image class="time-icon" :src="item.image" mode="widthFix"
								style="width: 36rpx;height: 36rpx;">
							</image>
							<view class="pr">
								<view class="time">
									{{item.startTimeDesc||''}}
								</view>
								<view class="status">
									{{item.isStart==0?"正在抢购":"即将开抢"}}
								</view>
								<image v-if="Itemindex==currentIndex" class="productActive"
									src="@/static/index/xiaolianxuanzhong.png" style="width: 36rpx;height: 12rpx;">
								</image>
							</view>
						</view>

					</view>
				</u-sticky>
				<view class="df aic jcc" v-if="goodsList.length==0"
					style="flex-direction: column;width: 100%; height: 800rpx;">
					<image src="@/static/empty/content-empty.png" style="width: 300rpx;height: 156rpx;" mode="widthFix">
					</image>
					<view class="c9 fs28 mt20">
						暂无特价商品
					</view>
				</view>
				<view class="">
					<view class="m30" :id="`view${val}`" v-for="(lab,val) in goodsList">
						<DailySaleItem @login="showLogin" :index="val" @change="changeSale" :lab="lab"></DailySaleItem>
					</view>
				</view>
			</view>
		</scroll-view>
		<LoginPopup @loginSuccess="loginSuccess" ref="LoginPopup"></LoginPopup>
		<ModalMsg v-model="showLocaltion" confirmName="前往定位" @confirm="chooseLocation" :showCancel="false">
			<view class="address-desc mt30 fs26 c3 u-text-center">
				您当前暂未定位，请定位后使用服务
			</view>
		</ModalMsg>
	</view>
</template>

<script>
	import Decimal from "decimal.js";
	import ModalMsg from '@/components/ModalMsg.vue'
	import DailySaleItem from './components/DailySaleItem.vue'
	import {
		getSessionList,
		specialsActivityGoodsList
	} from '@/other/api/activityGoods.js'
	import {
		bannerCode,
	} from '@/api/common.js'
	export default {
		components: {
			ModalMsg,
			DailySaleItem
		},
		data() {
			return {
				numAll:0,
				viewid: '',
				loading: true,
				goodsCarList: [],
				goodsList: [],
				currentIndex: 0,
				height: '100vh',
				showAddress: false,
				offsetTop: 0,
				sessionList: [],
				bannerList: [],
				showLocaltion: false,
				sessionTime: '',
				id: '',
			}
		},

		mounted() {
			let that = this
			uni.getSystemInfo({
				success: function(res) {
					that.height = res.screenHeight - (res.platform == 'ios' ? 44 : 48) - res.statusBarHeight
					that.offsetTop = ((res.platform == 'ios' ? 44 : 48) + res.statusBarHeight) / (uni.upx2px(
						100) / 100);
				}
			});
		},
		onShow() {
			// this.clacGoodsSet()
		},
		onLoad(e) {
			if (e.sessionTime) {
				this.sessionTime = e.sessionTime
				this.id = e.id
			}
			this.bannerCode()
			this.goodsCarList = uni.getStorageSync('CARGOODLIST') || []
			let num = this.$common.clacCount(this.goodsCarList)
			this.numAll = num
			this.getSessionList(true)
			// this.specialsActivitySessionId = e.id
		},
		methods: {
			chooseLocation() {
				uni.navigateTo({
					url: '/pages/addressLocation'
				})
			},
			handleCart(e) {
				let goodsCarList = this.goodsCarList || []
				let index = goodsCarList.findIndex(i => i.platformGoodsSpecMixId == e.platformGoodsSpecMixId)
				if (index == -1) { //购物车中没有这个商品  新增操作
					goodsCarList.unshift(e)
				} else { //购物车中有这个商品  修改操作
					if (e.purNum == 0) { //删除操作
						goodsCarList.splice(index, 1)
					} else {
						//只有購物車的時候 才手動更新列表
						goodsCarList[index].purNum = e.purNum
						goodsCarList[index].busType = e.busType
						goodsCarList[index].platformPrice = e.platformPrice
					}
				}
				this.goodsCarList = goodsCarList
				let num = this.$common.clacCount(this.goodsCarList)
				this.numAll = num
				this.$u.toast('加购成功')
				uni.setStorageSync('CARGOODLIST', goodsCarList)
			},
			clacGoods(list, flag) {
				return new Promise((resolve, reject) => {
					list.forEach((e, index) => {
						e.platformGoodsSpecMix.forEach(mix => {
							if (mix.platformGoodsSpecMixId == this.id && flag) {
								this.$nextTick(() => {
									this.viewid = 'view' + index
								})
							}
							let info = this.goodsCarList.find(_e => _e.platformGoodsSpecMixId ===
								mix
								.platformGoodsSpecMixId)
							if (info) {
								this.$set(mix, 'purNum', info.purNum)
								this.$set(mix, 'checkFlag', true)
							} else {
								this.$set(mix, 'purNum', 0)
								this.$set(mix, 'checkFlag', true)
							}
						})

					})
					resolve(list)
				})
			},
			changeSale(item, index) {
				let inputVal = item.platformGoodsSpecMix[0].purNum
				let startSaleNum = item.platformGoodsSpecMix[0].startSaleNum
				let step = startSaleNum && item.platformGoodsSpecMix[0].isDouble == 1 ? item.platformGoodsSpecMix[0]
					.startSaleNum : 1
				if (inputVal < startSaleNum) {
					inputVal = startSaleNum
				} else {
					inputVal = new Decimal(inputVal).add(new Decimal(step))
				}
				this.goodsList[index].platformGoodsSpecMix[0].purNum = inputVal
				this.handleCart(this.goodsList[index].platformGoodsSpecMix[0])
			},
			toShopCart(){
				uni.switchTab({
					url:'/pages/shopping/index'
				})
			},
			loginSuccess() {},
			clickBanner(e) {
				if (!this.TOKEN) {
					this.showLogin()
					return
				}
				if (!this.LOCATION.areaId) {
					this.showLocaltion = true
					return
				}
				this.$common.advJump(this.bannerList[e])
			},
			// 展示登录弹窗
			showLogin() {
				this.$refs.LoginPopup.checkLogin()
			},
			bannerCode() {
				return bannerCode({
					bannerCode: 'wx_activity_top'
				}).then(res => {
					this.bannerList = res.data
				})
			},
			getSessionList(e) {
				getSessionList().then(res => {
					if (res.code == 200) {
						this.sessionList = res.data
						if (!res.data.length) {
							this.loading = false
						} else {
							console.log(this.sessionTime,'this.sessionTime')
							if (this.sessionTime) {
								let index = res.data.findIndex(item => item.startTime == this.sessionTime)
								console.log(index,'==')
								this.currentIndex = index
								this.bPlatformGroup(this.sessionTime, e)
							} else {
								this.bPlatformGroup(res.data[0].startTime)
							}

						}
					} else {
						this.loading = false
						uni.showToast({
							title: res.msg,
							icon: 'none',
							mask: true
						})
					}
				})
			},

			handleChange(e) {
				if (e == this.currentIndex) return
				this.bPlatformGroup(this.sessionList[e].startTime)
				this.currentIndex = e
			},
			bPlatformGroup(startTime, flag) {
				specialsActivityGoodsList({
					sessionTime: startTime,
				}).then(async res => {
					this.loading = false
					if (res.code == 200) {
						let list = await this.clacGoods(res.data, flag)
						this.goodsList = list

					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							mask: true
						})
					}
				})
			},
		},
		// onShareTimeline() {
		// 	let path =
		// 		`platformGroupId=${this.bPlatformGroupInfo.platformGroupId}&cityId=${this.cityId}&areaId=${this.areaId}`
		// 	return {
		// 		title: this.bPlatformGroupInfo.shareText || this.APPSHARE.title,
		// 		query: path,
		// 		imageUrl: this.bPlatformGroupInfo.shareImage || this.APPSHARE.imageUrl
		// 	}
		// },

		// onShareAppMessage() {
		// 	let path =
		// 		`/pages/theme/themeIndex?platformGroupId=${this.bPlatformGroupInfo.platformGroupId}&cityId=${this.cityId}&areaId=${this.areaId}`
		// 	return {
		// 		title: this.bPlatformGroupInfo.shareText || this.APPSHARE.title,
		// 		path: path,
		// 		imageUrl: this.bPlatformGroupInfo.shareImage || this.APPSHARE.imageUrl
		// 	}
		// },
	}
</script>
<style lang="scss">
	.theme-img {
		.u-image {
			min-height: 500rpx !important;
		}
	}
</style>
<style lang="scss" scoped>
	.leftOne {
		margin-left: 46rpx;
	}

	.leftTwo {
		margin-left: 192rpx;
	}

	.productActive {
		transition: all .5s;
		margin: 0 auto;
		display: block;
	}

	.container {
		overflow: hidden;
	}

	/deep/ .num-box {
		justify-content: flex-end !important;
	}

	.price {
		color: #EF2929;
		font-size: 36rpx;
		font-family: PingFang SC-Bold, PingFang SC;
	}

	.category-tag {
		height: 75rpx;
		font-size: 26rpx;
		color: white;

		.time-icon {
			position: absolute;
			top: -10rpx;
			z-index: 0;
			left: -18rpx;
		}

		.time {
			font-size: 26rpx;
			color: #333333;
			font-weight: bold;
		}

		.status {
			font-size: 22rpx;
			color: #666666;
		}

	}

	.current-tag {
		.time {
			color: #48A147
		}

		.status {
			color: #48A147
		}
	}
	.shopCart{
		position: fixed;
		bottom: 120rpx;
		right: 20rpx;
		z-index: 9;
		
	}
</style>